<!--
 * @Descripttion:
 * @version:
 * @Author: ybac
 * @Date: 2023-03-14 14:50:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-03-30 17:38:01
-->
<template>
  <div>
    <div class="file-name" v-for="(item, index) in fileList" :key="index" @click="downLoad(item)">
      <div class="subtitle limit-text" style="width:90%">{{ item.fileName }}</div>
      <img class="down-load" src="@/assets/img/down_load.png" alt="下载/预览文件">
    </div>
    <file-preview @close="filePreviewShow = false" :imgList="[domianURL + this.uri]" :filePreviewShow="filePreviewShow"></file-preview>
  </div>
</template>

<script>
import { getFileListByIds } from '@/api/api'
// import FilePreview from './FilePreview.vue'

import { apiBaseUrlDownload } from "@/utils/request";
import FilePreview from '@/components/fileActions/FilePreview'
export default {
  props:{
    ids: {
      type: [String, Number],
      default: ''
    },
    justDownload:{
      type:Boolean,
      default:false
    }
  },
  components: {
    FilePreview
  },
  data() {
    return {
      fileList: [],
      domianURL: apiBaseUrlDownload,
      imgVisible: false,
      filePreviewShow: false,
      uri: ''
    }
  },
  watch: {
    ids(newVal) {
      this.getFileList(newVal)
    }
  },
  mounted() {
    this.getFileList(this.ids)
  },
  methods: {
    downLoad(item) {
      var reg = /\w*(?=\/)/
      // console.log(item.mediaType.match(reg)[0],item.mediaType)
      // return
      if(this.justDownload){
        console.log('999',item)
        console.log(item.mediaType.match(reg)[0],item.mediaType)
        if (item.mediaType.match(reg)[0] == 'image') {
          this.downloadIamge(this.domianURL + item.uri, new Date().getTime());
        } else {
          // location.href = this.domianURL + 'jksaas-mgt/mgt/' + item.uri
          window.open(this.domianURL + item.uri)
        }
        return
      }
      if (item.mediaType.match(reg)[0] == 'image') {
        this.uri = item.uri
        this.filePreviewShow = true
        console.log(item.mediaType.match(reg)[0],item.mediaType)
      } else {
        // location.href = this.domianURL + 'jksaas-mgt/mgt/' + item.uri
        window.open(this.domianURL + item.uri)
      }
    },
    getFileList(ids) {
      getFileListByIds({ ids }).then(res => {
        if (res.code == 200) {
          this.fileList = res.result
          this.$emit('getFileList',this.fileList)
        }
      })
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.src = imgsrc + "?v=" + Math.random(); // 处理缓存
      image.crossOrigin = "*"; // 支持跨域图片
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "img"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/public.less';
.file-name {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.file-name:hover {
  color: @normalFont;
  background: #e6f7ff;
  .down-load {
    display: inline;
    margin-right: @distance5;
  }
}
.img-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.down-load {
  display: none;
}
</style>
